<template>
  <div class="securitycenter">
    <PersonalHeader :content="1"></PersonalHeader>

    <section class="securitycentermain">
      <section class="type">
        <h2 class="title">{{$t('user[0]')}}</h2>
        <ul class="contt">
          <li class="list">
            <p class="one">{{$t('user[1]')}}</p>
            <p class="two">
              <i class="el-icon-success"></i>
            </p>
            <p class="three">
              {{$t('user[2]')}}
              <span style="margin-left: 15px;"></span>
              <el-button type="primary" size="mini" round v-if="userInfo.security_level == 0">{{$t('user[3]')}}</el-button>
              <el-button size="mini" round v-else>{{$t('user[3]')}}</el-button>

              <el-button type="primary" size="mini" round v-if="userInfo.security_level == 1">{{$t('user[4]')}}</el-button>
              <el-button size="mini" round v-else>{{$t('user[4]')}}</el-button>

              <el-button type="primary" size="mini" round v-if="userInfo.security_level == 2">{{$t('user[5]')}}</el-button>
              <el-button size="mini" round v-else>{{$t('user[5]')}}</el-button>

              <el-button type="primary" size="mini" round v-if="userInfo.security_level == 3">{{$t('user[6]')}}</el-button>
              <el-button size="mini" round v-else>{{$t('user[6]')}}</el-button>
            </p>
            <p class="four">
              <a @click="change_router('syloginpassword')">{{$t('user[7]')}}</a>
              <!-- <router-link to="syloginpassword">{{$t('user[7]')}}</router-link> -->
            </p>
          </li>
          <li class="list">
            <p class="one">{{$t('user[8]')}}</p>
            <p class="two">
              <i :class="{'el-icon-error': userInfo.phone_bind == 0, 'el-icon-success': userInfo.phone_bind == 1}"></i>
            </p>
            <p class="three">{{$t('user[9]')}}</p>
            <p class="four">
              <a @click="change_router('syphone')" v-if="userInfo.phone_bind ==0">{{$t('user[10]')}}</a>
              <!-- <router-link to="syphone" v-if="userInfo.phone_bind ==0">{{$t('user[10]')}}</router-link> -->
            </p>
          </li>
          <li class="list" v-if="false">
            <p class="one">{{$t('user[11]')}}</p>
            <p class="two">
              <i :class="{'el-icon-error': userInfo.email_bind == 0, 'el-icon-success': userInfo.email_bind == 1}"></i>
            </p>
            <p class="three">{{$t('user[12]')}}</p>
            <p class="four">
              <a @click="change_router('syemail')" v-if="userInfo.email_bind ==0">{{$t('user[13]')}}</a>
              <!-- <router-link to="syemail" v-if="userInfo.email_bind ==0">{{$t('user[13]')}}</router-link> -->
            </p>
          </li>
          <li class="list">
            <p class="one">{{$t('user[14]')}}</p>
            <p class="two">
              <i :class="{'el-icon-error': userInfo.payment_password_set == 0, 'el-icon-success': userInfo.payment_password_set == 1}"></i>
            </p>
            <p class="three">{{$t('user[15]')}}</p>
            <p class="four">
              <a @click="change_router('sycapitalpassword')" v-if="userInfo.payment_password_set == 0">{{$t('order[17]')}}</a>
              <a @click="change_router('sycapitalpasswordmodify')" v-else>{{$t('user[16]')}}</a>
              <!-- <router-link to="sycapitalpassword" v-if="userInfo.payment_password_set == 0" >{{$t('order[17]')}}</router-link> -->
              <!-- <router-link to="sycapitalpasswordmodify" v-else>{{$t('user[16]')}}</router-link> -->
            </p>
          </li>
          <li class="list" v-if="false">
            <p class="one">{{$t('reg[15]')}}</p>
            <p class="two">
              <i :class="{'el-icon-error': userInfo.google_bind == 0, 'el-icon-success': userInfo.google_bind == 1}"></i>
            </p>
            <p class="three">{{$t('user[17]')}}</p>
            <p class="four">
              <a @click="change_router('sygoogle')" v-if="userInfo.google_bind == 0">{{$t('user[18]')}}</a>
              <!-- <router-link to="sygoogle" v-if="userInfo.google_bind == 0">{{$t('user[18]')}}</router-link> -->
              <a v-else-if="userInfo.google_verify == 1" @click="dialogVisible=true">{{$t('contract[15]')}}</a>
              <a v-else-if="userInfo.google_verify == 0" @click="dialogVisible=true">{{$t('user[19]')}}</a>
            </p>
          </li>
        </ul>
      </section>

      <el-dialog :title="$t('user[20]')" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item :label="$t('user[21]')" prop="google_code">
              <el-input v-model="ruleForm.google_code"></el-input>
            </el-form-item>
            <el-form-item :label="$t('user[22]')" prop="code">
              <el-input v-model="ruleForm.code">
                <template slot="append">
                  <el-button @click="Verificationfun()">{{Verification.text}}</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="medium" round>{{$t('order2[15]')}}</el-button>
          <el-button type="primary" @click="googleVerifyStartclick" size="medium" round>{{$t('order2[16]')}}</el-button>
        </span>
      </el-dialog>

      <!-- 登录记录 不要 -->
      <section class="securitycenterlist" v-if="false">
        <h2 class="title">{{$t('user[23]')}}</h2>
        <div class="cont">
          <el-table :data="loginHistorydata.data" style="width: 100%">
            <el-table-column prop="created_at" :label="$t('user[24]')" width="600" align="left"></el-table-column>
            <!-- <el-table-column prop="log_ip" :label="$t('user[25]')" width="370" align="left"></el-table-column> -->
            <el-table-column prop="agent_info" :label="$t('user[26]')" width="630" align="right">
              <template slot-scope="scope">
                <span v-if="scope.row.agent_info == '0'">{{$t('user[27]')}}</span>
                <span v-else-if="scope.row.agent_info == 'WebKit'">{{$t('user[28]')}}</span>
                <span v-else>{{$t('user[29]')}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <PagesSize :content="loginHistorydata" @func="getMsgFormSon"></PagesSize>
      </section>
    </section>
  </div>
</template>

<script>
import { loginHistory } from "@/api/user";
import { googleVerifyStart } from "@/api/securitycenter";
import PagesSize from "_dom/paging";
import PersonalHeader from "_dom/personalheader";
import { mapActions } from "vuex";
export default {
  name: "securitycenter",
  data() {
    return {
      loginHistorydata: "",
      userInfo: "",
      changedata: {
        page: "1"
      },
      dialogVisible: false,
      ruleForm: {
        google_code: "",
        key: "",
        code: ""
      },
      rules: {
        google_code: [
          { required: true, message: this.$t('user[30]'), trigger: "blur" }
        ],
        code: [{ required: true, message: this.$t('user[31]'), trigger: "blur" }]
      },
      Verification: {
        text: this.$t('reg[0]'),
        time: 60,
        type: true,
        timer: ""
      }
    };
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    getMsgFormSon(datavue) {
      this.changedata = datavue;
    },
    change_router(which) {
      if ((which == 'sygoogle' || which == 'syloginpassword' || which == 'sycapitalpassword') && this.userInfo.phone_bind != 1) {
        this.$message.error('请先绑定手机号');
        return;
      }
      this.$router.push({ path: which })
    },
    handleClose() {
      this.dialogVisible = false;
      clearInterval(this.Verification.timer);
      this.Verification.type = true;
      this.Verification.time = 60;
      this.Verification.text = this.$t('reg[0]');
      this.$refs["ruleForm"].resetFields();
    },
    googleVerifyStartclick() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.ruleForm.key =
            this.userInfo.google_verify == 1 ? "stop" : "start";
          googleVerifyStart(this.ruleForm)
            .then(res => {
              this.handleClose();
              this.$message({
                message: this.$t('user[32]'),
                type: "success"
              });
              setTimeout(() => {
                this.userInfo.google_verify === 1
                  ? (this.userInfo.google_verify = 0)
                  : (this.userInfo.google_verify = 1);
              }, 800);

            })
            .catch(err => { });
        }
      });
    },
    Verificationfun() {
      if (!this.Verification.type) {
        return false;
      }
      var _data = {
        type: "4",
        phone: this.$store.state.user.phone
          ? this.$store.state.user.phone
          : this.$store.state.user.email,
      };
      this.$public.captcha(_data, this);
    },
    typecaptcha() {
      this.Verification.type = false;
      this.Verification.timer = setInterval(() => {
        this.Verification.time--;
        if (this.Verification.time < 1) {
          clearInterval(this.Verification.timer);
          this.Verification.type = true;
          this.Verification.time = 60;
          this.Verification.text = this.$t('reg[1]');
        } else {
          this.Verification.text = this.Verification.time + "S";
        }
      }, 1000);
    }
  },
  created() {
    this.getUserInfo().then(res => {
      this.userInfo = res.config;
    }).catch(err => { });
  },
  beforeEach: function (to, from, next) {
    clearInterval(this.Verification.timer);
    next();
  },
  components: {
    PagesSize,
    PersonalHeader
  }
};
</script>

